import { useGo } from '@/hooks'
import { useRoute } from 'vue-router'
import { reactive, watch } from 'vue'

import type { BWPropsInner } from './model.d.ts'
export function useTool() {
  const go = useGo()
  const route = useRoute()

  const data = reactive<BWPropsInner>({
    subMenuKey: 'base',
    listMenu: [
      {
        text: '基础设置',
        key: 'base',
        icon: 'setting-outlined',
      },
      {
        text: '消息设置',
        key: 'news',
        icon: 'message-outlined',
        disable: true,
      },
      {
        text: '打印设置',
        key: 'print',
        icon: 'printer-outlined',
        disable: true,
      },
      {
        text: '二维码标签',
        key: 'qrCode',
        icon: 'qrcode-outlined',
        disable: true,
      },
    ],
  })

  const toPage = (item: any) => {
    const { appId, pageId } = route.params
    if (appId && pageId && !item?.disable) {
      const path = `/design/${appId}/pageSetup/${pageId}/${item.key}`
      go(path)
    }
  }

  watch(
    () => route,
    (newVal) => {
      const subMenuKey = newVal.meta.subMenuKey
      data.subMenuKey = subMenuKey ?? 'base'
    },
    { deep: true, immediate: true }
  )

  return { data, toPage }
}
